<!DOCTYPE html>
<html>
<head>
    <title>component-5 兄弟组件之间的传值</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <div id="box">
        <com-a></com-a>
        <com-b></com-b>
        <com-c></com-c>
    </div>
    <script type="text/javascript">
        var Event = new Vue();
        var A = {
            template: `<div><span>我是组件A===>{{a}}</span><input type="button" value="把值传给C" @click="chuan" /></div>`,
            data() {
                return {
                    a: "我是A的值"
                }
            },
            methods: {
                chuan() {
                    Event.$emit('a-msg', this.a)
                }
            }
        }
        var B = {
            template: `<div><span>我是组件B====>{{b}}</span><input type="button" value="把值传给C" @click='chuan' /></div>`,
            data() {
                return {
                    b: "我是B的值"
                }
            },
            methods: {
                chuan() {
                    Event.$emit('b-msg', this.b)
                }
            }
        }
        var C = {
            template: `<div><span>我是组件C</span><br/>A传递过来的值===>{{a}}<br/>B传递过来的值====>{{b}}</div>`,
            data() {
                return {
                    a: '',
                    b: ''
                }
            },
            mounted() {
                Event.$on('a-msg', (a) =>this.a = a)
                Event.$on('b-msg', (b) =>this.b = b)
            }
        }

        var vm = new Vue({
            el: "#box",
            data: {
            },
            components: {
                'com-a': A,
                'com-b': B,
                'com-c': C
            }
        })
    </script>
</body>

</html>